<script setup lang="ts">
import { getPayUrl } from '@/services/consult'
import { showConfirmDialog, showLoadingToast, showToast } from 'vant'
import { ref } from 'vue'

// show 控制显示隐藏（支持v-model:show）
// orderId 订单ID
// actualPayment 实付金额
// onClose 关闭前的函数
const props = withDefaults(
  defineProps<{
    show: boolean
    orderId: string
    actualPayment: number
    onClose?: () => void
    payCallback: string
    // 是否开启关闭引导，默认值 false 不开启
    enableCloseGuide?: boolean
  }>(),
  {
    enableCloseGuide: false
  }
)

const emit = defineEmits<{
  (e: 'update:show', val: boolean): void
}>()

const paymentMethod = ref<0 | 1>()
// 支付逻辑
const pay = async () => {
  if (paymentMethod.value === undefined) return showToast('请选择支付方式')
  showLoadingToast({ message: '跳转支付', duration: 0 })
  const res = await getPayUrl({
    paymentMethod: paymentMethod.value,
    orderId: props.orderId,
    payCallback: import.meta.env.VITE_CP_PAY_BACK_URL + props.payCallback
  })
  window.location.href = res
}

const onClose = async () => {
  if (props.enableCloseGuide) {
    try {
      await showConfirmDialog({
        title: '关闭支付',
        message: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
        confirmButtonText: '继续支付',
        cancelButtonText: '仍要关闭',
        closeOnPopstate: false // 是否在页面回退时自动关闭
      })
      // 点的是确定按钮（继续支付）
      return false // 可以阻止动作面板关闭
    } catch (err) {
      // 点的是取消按钮（仍要关闭）
      // 直接放过向下执行即可
      // 补充说明：这个 catch 虽然没有代码需要执行，但是必须得 catch，因为如果不捕获异常就会中断函数向下执行，从而导致无法执行下面得 onClose 和 return true 来关闭抽屉
    }
  }

  props.onClose && props.onClose()
  return true
}
</script>

<template>
  <van-action-sheet
    :show="show"
    @update:show="emit('update:show', $event)"
    title="选择支付方式"
    :close-on-popstate="false"
    :closeable="false"
    :before-close="onClose"
  >
    <div class="pay-type">
      <p class="amount">￥ {{ actualPayment.toFixed(2) }}</p>
      <van-cell-group>
        <van-cell title="微信支付" @click="paymentMethod = 0">
          <template #icon><cp-icon name="consult-wechat" /></template>
          <template #extra>
            <van-checkbox :checked="paymentMethod === 0" />
          </template>
        </van-cell>
        <van-cell title="支付宝支付" @click="paymentMethod = 1">
          <template #icon><cp-icon name="consult-alipay" /></template>
          <template #extra>
            <van-checkbox :checked="paymentMethod === 1" />
          </template>
        </van-cell>
      </van-cell-group>
      <div class="btn">
        <van-button @click="pay" type="primary" round block>
          立即支付
        </van-button>
      </div>
    </div>
  </van-action-sheet>
</template>

<style lang="scss" scoped>
.pay-type {
  .amount {
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
  .btn {
    padding: 15px;
  }
  .van-cell {
    align-items: center;
    .cp-icon {
      margin-right: 10px;
      font-size: 18px;
    }
    .van-checkbox :deep(.van-checkbox__icon) {
      font-size: 16px;
    }
  }
}
</style>
